﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="login.aspx.cs" Inherits="SampleSite.admin.login" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>登录</title>
    
    <link href="/css/themes/metro/easyui.css" rel="stylesheet" type="text/css" />
    <link href="/css/themes/icon.css" rel="stylesheet" type="text/css" />
    <script src="/scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
    <script src="/scripts/jquery.easyui.min.js" type="text/javascript"></script>
    <script src="/scripts/easyui-lang-zh_CN.js" type="text/javascript"></script>
    
    <style type="text/css">
        .center {
            margin-left:auto;
            margin-right:auto;
        }

        label {
            color:#999;
            font-weight:bold;
        }

        input[type=submit] {
            width:100px;
            font-size:16px;
            font-weight:bold;
        }

        input[type=text],input[type=password] {
            width:200px;
            height:20px;
        }
    </style>
</head>
<body style="background:rgb(238, 238, 238);">
    <%-- 设计1 --%>

    <%-- 
    <div style="height: 40px;"></div>
    <div style="width: 100%">
        <div style="width: 935px;margin-left:auto;margin-right:auto;">
            <div style="float:left;">
                <img style="width:475px;height:490px;" />
            </div>
            <div style="float:left;padding-left:100px;padding-top:10px;">
                <img style="width:200px;height:100px;" />
                <form id="form1" runat="server">
                    <fieldset style="width:300px;">
                        <legend>登录页面</legend>
                        <div style="padding:10px;">
                            <div><label for="Name">账号</label></div>
                            <div>
                                <input id="Name" name="Name" type="text" value="" />
                            </div>
                            <div style="height:10px;"></div>
                            <div><label for="Password">密码</label></div>
                            <div>
                                <input id="Password" name="Password" type="password" value="" />
                            </div>
                            <div style="height:10px;"></div>
                            <div>
                                <input id="btnSubmit" type="submit" value="登录" />
                            </div>
                        </div>                                        
                    </fieldset>
                </form>
            </div>
        </div>
    </div>
    --%>

    <%-- 设计2 --%>
    <div class="center" style="margin-top:80px;padding:32px;background:white; border:1px solid #bbb;width:360px;">
        <div class="center" style="width:300px;font-weight:bold;font-size:150%;color:#904;">登录到后台应用</div>
        <div style="height:10px;"></div>
        <div class="center" style="width:300px;">
            <form id="form1" runat="server">
                <fieldset style="width:300px;">
                    <legend></legend>
                    <div style="padding:10px;">
                        <div><label for="Name">账号</label></div>
                        <div>
                            <input id="Name" name="Name" type="text" value=""
                                   class="easyui-validatebox" data-options="required:true" />
                        </div>
                        <div style="height:10px;"></div>
                        <div><label for="Password">密码</label></div>
                        <div>
                            <input id="Password" name="Password" type="password" value="" 
                                   class="easyui-validatebox" data-options="required:true" />
                        </div>
                        <div style="height:10px;"></div>
                        <div><label for="Code">验证码</label></div>
                        <div>
                            <input id="Code" type="text" name="Code"/>
                        </div>
                        <div style="height:10px;"></div>
                        <div>
                            <input id="btnSubmit" type="submit" value="登录" />
                        </div>
                    </div>                                        
                </fieldset>
            </form>
        </div>
    </div>

    <script type="text/javascript">
        function onRefresh() {
            $('#imgCode').attr('src', '');
            $('#imgCode').attr('src', '/admin/getcode.aspx?random=' + Math.random());
            $('#Code').tooltip('hide');
            bindTooltip();
        }

        function bindTooltip() {
            $('#Code').blur(function () {
                $('#Code').tooltip('hide');
            });
            $('#Code').focus(function () {
                $('#Code').tooltip('show');
            });
        }

        $(document).ready(function () {
            $('#Code').tooltip({
                position: 'right',
                content: $('<div ><img id="imgCode" src="/admin/getcode.aspx" style="width:150px;height:50px;" /><a href="javascript:onRefresh()">看不清</a></div'),
                showEvent: 'focus',
                hideEvent: 'blur',
                onUpdate: function (content) {
                    content.panel({
                        width: 200,
                        border: false
                    });
                },
                onShow: function () {
                    var t = $(this);
                    t.tooltip('tip').unbind().bind('mouseenter', function () {
                        t.tooltip('show');
                        $('#Code').unbind();
                    }).bind('mouseleave', function () {
                        bindTooltip();
                    });
                }
            });

            $('#form1').submit(function () {
                var validate = $('#form1').form('validate');
                if (!validate)
                    return false;

                var code = $('#Code').val();
                if (code && code.length == 4) {
                    return true;
                }
                else {
                    alert('请填写验证码');
                    return false;
                }
            });
        });
    </script>
</body>
</html>
